<template>
  <el-form ref="form" label-width="80px" :model="spuList">
    <el-form-item label="SPU名称">
      <el-input v-model="spuList.spuName"></el-input>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select v-model="spuList.tmId" placeholder="选择品牌">
        <el-option v-for="item in tradeMarkList" :key="item.id" :label="item.tmName" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input type="textarea" v-model="spuList.description"></el-input>
    </el-form-item>
    <!-- 照片墙 action+file-list+数据有name、url-->
    <el-form-item label="图片">
      <el-upload list-type="picture-card" action="dev-api/admin/product/fileUpload"
        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="SpuImageList"
        :on-success="handleSuccess">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-select v-model="attrIdAndName" :placeholder="`还有${unChoseSaleAttr.length}项未选择`">
        <el-option :label="i.name" :value="`${i.id}:${i.name}`" v-for="i in BaseSaleAttrList" :key="i.id"></el-option>
      </el-select>
      <el-button type="primary" style="margin: 0 20px" :disabled="!attrIdAndName" @click="addSaleAttr">添加销售属性
      </el-button>
      <el-table style="width: 100%" :data="spuList.spuSaleAttrList">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="saleAttrName" label="属性名" width="width">
        </el-table-column>
        <el-table-column label="属性值名称列表" width="width">
          <template slot-scope="{ row, $index }">
            <el-tag v-for="tag in row.spuSaleAttrValueList" :key="tag.id" style="margin:0 10px" closable>
              {{ tag.saleAttrValueName }}
            </el-tag>
            <el-input v-if="row.saleAttrFlag" placeholder="添加" v-model="row.inputSaleAttrValue" size="small"
              style="width:90px" @blur="handleInputFlag(row,$index)"></el-input>
            <el-button v-else type="primary" size="small" @click="addSaleValue(row)">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="width">
          <template slot-scope="{row,$index}">
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">保存</el-button>
      <el-button type="primary" @click="cancelSpuForm()">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "SpuForm",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      spuList: {
        category3Id: 0,
        description: "",
        spuImageList: [],
        spuName: "",
        tmId: 0,
        spuSaleAttrList: [],
      },
      tradeMarkList: [],
      SpuImageList: [],
      BaseSaleAttrList: [],
      attrIdAndName: "",
      spuImageList: [],
    };
  },
  computed: {
    unChoseSaleAttr() {
      let result = this.BaseSaleAttrList.filter((item) => {
        return this.spuList.spuSaleAttrList.every(
          (item1) => {
            return item1.saleAttrName != item.name
          }
        )
      })
      return result
    },
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.spuImageList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    cancelSpuForm() {
      this.$emit("cancelSpuForm", 0);
    },
    addSaleValue(row) {
      this.$set(row, "saleAttrFlag", true)
      this.$set(row, 'inputSaleAttrValue', '')
    },
    handleInputFlag(row,$index) {
      row.saleAttrFlag = false
      console.log( row.inputSaleAttrValue,row,989999);
      let  aArr={
         saleAttrName:row.saleAttrName,
        saleAttrValueName:row.inputSaleAttrValue,
        baseSaleAttrId:row.baseSaleAttrId,
        spuId:row.spuId
      }
      
      this.spuList.spuSaleAttrList[$index].spuSaleAttrValueList.push(aArr)

    },
    async initSpuData1(category3Id) {
      this.spuList.category3Id = category3Id
        let tradeMarkListResult = await this.$API.spu.reqTradeMarkList();
      if (tradeMarkListResult.code == 200) {
        this.tradeMarkList = tradeMarkListResult.data;
      }
       let BaseSaleAttrListResult = await this.$API.spu.reqBaseSaleAttrList();
      if (BaseSaleAttrListResult.code == 200) {
        this.BaseSaleAttrList = BaseSaleAttrListResult.data;
      }
      
    },
    async initSpuData(spu) {
      //初始化数据
      let spuResult = await this.$API.spu.reqSku(spu.id);
      if (spuResult.code == 200) {
        this.spuList = spuResult.data;
      }
      let tradeMarkListResult = await this.$API.spu.reqTradeMarkList();
      if (tradeMarkListResult.code == 200) {
        this.tradeMarkList = tradeMarkListResult.data;
      }
      let SpuImageListResult = await this.$API.spu.reqSpuImageList(spu.id);
      if (SpuImageListResult.code == 200) {
        let imgs = SpuImageListResult.data;
        console.log(123321, imgs);
        imgs.forEach((element) => {
          element.name = element.imgName;
          element.url = element.imgUrl;
        });
        this.SpuImageList = imgs;
      }
      let BaseSaleAttrListResult = await this.$API.spu.reqBaseSaleAttrList();
      if (BaseSaleAttrListResult.code == 200) {
        this.BaseSaleAttrList = BaseSaleAttrListResult.data;
      }
    },
    handleSuccess(reponse, file, fileList) {
      this.spuImageList = fileList
    },
    addSaleAttr() {
      const [baseSaleAttrId, saleAttrName] = this.attrIdAndName.split(":")
      let newArr = {
        baseSaleAttrId,
        saleAttrName,
        spuSaleAttrValueList: []
      }
      console.log(9999999, newArr);
      this.spuList.spuSaleAttrList.push(newArr)
    }
  },
};
</script>

<style>
</style>